<!DOCTYPE html>
<html lang="en">
<head>
  <title>Arma flight recorder</title>
  <meta charset="UTF-8">
 <!--
  <link rel="stylesheet" type="text/css" href="jquery-ui.css">
 -->
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
  <link rel="stylesheet" type="text/css" href="stratis.css">
  <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false"></script>
  <script src="jquery-1.9.1.js"></script>
  <script src="jquery-ui.js"></script>
  <script src="stratis.js"></script>
</head>

<body>            
<script>
  // Load the IFrame Player API code asynchronously.
  var tag = document.createElement('script');
  tag.src = "https://www.youtube.com/player_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  // Replace the 'ytplayer' element with an <iframe> and
  // YouTube player after the API code downloads.
  var player;
  function onYouTubePlayerAPIReady() {
    player = new YT.Player('ytplayer', {
      height: '240',
      width: '320',
      videoId: 'MM01m2t-ZKI'
    });
  };
</script>

<div id="heading">
<h1>Experimental Arma3 flight recorder</h1>
<span>
Click on colored circles to start one of the videos at
approximately that position.
</span> 
<span id="r">
Code can be found at <a href="https://code.google.com/p/arma-location/">Project page</a>.
</span>
</div>

<div id="ytplayer"> </div>
<div id="map"> </div>

<div id="control" title="Controls">
  <div id="ctlmsg"> </div>
</div>

<div id="msgBox" title="Messages">
<font class="msgfont"><span id="msg">No message.</span></font>
</div>

</body>
